<template>
  <div class="chart-content-wrapper chart-content-wrapper2" id="chart-content-wrapper2"   @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <TopFilter :title="reportName" ref="topFilter">
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filterN" type="planArea"></double-check-filter>
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
    </TopFilter>
    <div class="chart-container three-half-chart-container" >
      <div class="four-part-box" style="height:89%;">
        <div class="second-search">
          <div class="search-right">
            <div class="secondSearchBtn" @click="showSecondSearch">
              <svg class="searchSvg" style="float:left;" viewBox="0 0 1024 1024">
                <path :d="svgPath.searchBtn"></path>
              </svg>
              <div style="float:left;margin-left:10px;">
                <span v-show="isAll==0">按条件筛选</span>
                <div class="chooseContainer" v-show="isAll>0">
                  <span>{{sexText}}</span>
                  <span>{{ageText}}</span>
                  <span>{{professionText}}</span>
                  <span>{{unitText}}</span>
                </div>
              </div>
            </div>
            <svg class="searchBtn searchSvg resetBtn" @click="reset" viewBox="0 0 1024 1024">
              <path :d="svgPath.resetBtn1"></path>
              <path :d="svgPath.resetBtn2"></path>
            </svg>
            <el-tooltip v-show="showExplain" class="item" effect="dark" :content="explain" placement="left">
              <svg class="searchBtn searchSvg" viewBox="0 0 1024 1024">
                <path :d="svgPath.helpBtn"></path>
              </svg>
            </el-tooltip>
          </div>
        </div>
        <div class="four-chart" v-show="isShowChart">
          <div class="four-chart-top">
            <div class="four-chart-left" >
              <div class="four-chart-title">
                <span> 基于性别的养老支出统计</span>
                <span class="title-bk-container"></span>
              </div>
              <div class="four-chart-item" id="sexChart" ></div>
            </div>
            <div class="four-chart-right" >
              <div class="four-chart-title">
                <span>基于年龄段的养老支出统计</span>
                <span class="title-bk-container"></span>
              </div>
              <div class="four-chart-item" id="ageChart"></div>
            </div>
          </div>
          <div class="four-chart-bottom">
            <div class="four-chart-left" >
              <div class="four-chart-title">
                <span>基于职业的养老支出统计</span>
                <span class="title-bk-container"></span>
              </div>
              <div class="four-chart-item" id="professionChart"></div>
            </div>
            <div class="four-chart-right" >
              <div class="four-chart-title">
                <span>基于单位类型的养老支出统计</span>
                <span class="title-bk-container"></span>
              </div>
              <div class="four-chart-item" id="unitChart"></div>
            </div>
          </div>
        </div>
      </div>
      <Summarize :showSummarizeText="conclusion" isBig='true'></Summarize>
    </div>
    <div class="second-search-box" v-show="showSearchBox">
      <div class="second-search-wrapper">
        <div class="second-title">
          <div class="title-name">
            <span>请选择人员统计维度</span>
          </div>
          <div class="second-btn-box">
            <span class="dap-button" style="margin-right:10px;" @click="saveMessage">确定</span>
            <span class="dap-close-button" @click="hideBox" >取消</span>
          </div>
        </div>
        <div class="second-main">
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              性别
            </h3>
            <ul class="second-contain">
              <li v-for="(item,index) in sex" @click="chooseSex(index,item)" :class="sexIndex==index?'activeLi':''">{{item}}</li>
            </ul>
            <div class="second-item-remind">备注：未知为身份证号码格式错误等数据异常原因，无法计算性别的人群</div>
          </div>
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              年龄段
            </h3>
            <ul class="second-contain">
             <li v-for="(item,index) in age" @click="chooseAge(index,item)" :class="ageIndex==index?'activeLi':''">{{item}}</li>
            </ul>
            <div class="second-item-remind">备注：其它为身份证号码格式错误等数据异常原因，无法计算年龄的人群</div>
          </div>
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              职业
            </h3>
            <ul class="second-contain">
             <li v-for="(item,index) in profession" @click="chooseProfession(index,item)" :class="professionIndex==index?'activeLi':''">{{item}}</li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述职业外的其它人员</div>
          </div>
          <div class="second-item" style="padding-bottom:20px;">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              单位类型
            </h3>
            <ul class="second-contain">
             <li v-for="(item,index) in unit" @click="chooseUnit(index,item)" :class="unitIndex==index?'activeLi':''">{{item}}</li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述单位类型外的其它人员</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {setChartHeight,seqencingArr,loadingOpt,svgPath} from '../../../assets/js/utils.js'
  import {getEiPayBasedOnPerson} from "../../../api/api";
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleCheck from '../../last/filter/single-check'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    name: 'chart4',
    props:['isChange','filter'],
    components:{
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
    },
    computed:{
      isAll(){
        return this.sexIndex+this.ageIndex+this.professionIndex+this.unitIndex;
      }
    },
    data () {
      return {
        showAge:true,
        showSex:true,
        showUnit:true,
        showProfession:true,
        chooseAgeIndex:0,
        chooseSexIndex:0,
        chooseUnitIndex:0,
        chooseProfessionIndex:0,
        sexIndex:0,
        ageIndex:0,
        professionIndex:0,
        unitIndex:0,
        sexText:'全部性别',
        ageText:'全部年龄段',
        professionText:'全部职业',
        unitText:'全部单位类型',
        sex:['全部性别','男性','女性','未知'],
        age:['全部年龄段','45岁以下','45-59岁','60-74岁','75岁-89岁','90岁以上','未知'],
        profession:['全部职业','工人','干部','公务员','其它'],
        unit:['全部单位类型','企业','事业单位','灵活就业','其它'],
        showSearchBox:false,
        filterN: JSON.parse(JSON.stringify(this.filter)),
        conclusion:'',
        areaCode: null,
        countAvgFlag: "1",
        medicalCategory: this.filter.nc.insuredTypeSecond[2].selectId,
        queryYear:this.filter.years[0],
        reportName: '基于人员的养老支出分析',
        isShowChart:true,
        height:400,
        svgPath:svgPath,
        explain:'',
        showExplain: true,
      }
    },
    mounted(){
      let areaCode = []
      this.filter.nc.planArea.map((item,index)=>{
        if(index>0&&index<=6){
          areaCode.push(item.selectId)
        }
      })
      this.areaCode = areaCode.join(',');
      setChartHeight();
      this.mySexChart = this.$echarts.init(document.getElementById('sexChart'))
      this.myAgeChart = this.$echarts.init(document.getElementById('ageChart'))
      this.myProfessionChart = this.$echarts.init(document.getElementById('professionChart'))
      this.myUnitChart = this.$echarts.init(document.getElementById('unitChart'));
      this.getData();
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          setChartHeight();
          setTimeout(()=>{
            this.mySexChart.resize();
            this.myAgeChart.resize();
            this.myUnitChart.resize();
            this.myProfessionChart.resize();
          },1)
        },111)
      },
      showSearchBox (val) {
        let zIndex = val ? 200 : 10000002;
        document.querySelector('.el-header').style.zIndex = zIndex;
      },
    },
    methods:{
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
      getData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.clearChart();
          this.showLoading();
          getEiPayBasedOnPerson('eipay/basedOnPerson',this.queryYear, this.areaCode, this.chooseAgeIndex, this.chooseUnitIndex, this.chooseProfessionIndex, this.chooseSexIndex).then(response=>{
            let json = response.data;
            if(response.code==0){
              this.hideLoading();
              this.isShowChart = true;
              this.explain = json.explain;
              if(json.explain==''){
                this.showExplain = false;
              }else{
                this.showExplain = true;
              }
              this.getSexChart(json.eiPayOfSex);
              this.getAgeChart(json.eiPayOfAge);
              this.getProfessionChart(json.eiPayOfOccu);
              this.getUnitChart(json.eiPayOfComp);
              // this.conclusion = json.conclusion;
            }else{
              this.isShowChart = false;
            }
          })
        },300)
      },
      showLoading(){
        this.mySexChart.showLoading(loadingOpt);
        this.myAgeChart.showLoading(loadingOpt);
        this.myUnitChart.showLoading(loadingOpt);
        this.myProfessionChart.showLoading(loadingOpt);
      },
      hideLoading(){
        this.mySexChart.hideLoading();
        this.myAgeChart.hideLoading();
        this.myUnitChart.hideLoading();
        this.myProfessionChart.hideLoading();
      },
      clearChart(){
        this.mySexChart.clear();
        this.myAgeChart.clear();
        this.myUnitChart.clear();
        this.myProfessionChart.clear();
      },
      chooseYear(year){
        //选择年份后执行事件
        this.queryYear = year;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区选择
        this.areaCode = filter.join(',');
        this.getData();
      },
      showSecondSearch(){
        this.showSearchBox = true;
        let arr = [];
        arr.push(this.sexIndex);
        arr.push(this.ageIndex);
        arr.push(this.unitIndex);
        arr.push(this.professionIndex);
        this.oldIndex = JSON.stringify(arr);
      },
      saveMessage(){
        this.getData();
        this.showSearchBox = false;
      },
      hideBox(){
        this.showSearchBox = false;
        let arr = JSON.parse(this.oldIndex);
        this.sexIndex = arr[0];
        this.ageIndex = arr[1];
        this.unitIndex = arr[2];
        this.professionIndex = arr[3];
      },
      // 选择单位
      chooseUnit(index,item){
        this.unitIndex = index;
        this.unitText = item;
        if(index==4){
          this.chooseUnitIndex = 9;
        }else{
          this.chooseUnitIndex = index;
        }
      },
      // 选择年龄
      chooseAge(index,item){
        this.ageIndex = index;
        this.ageText = item;
        if(index==6){
          this.chooseAgeIndex = 9;
        }else{
          this.chooseAgeIndex = index;
        }
      },
      // 选择性别
      chooseSex(index,item){
        this.sexIndex = index;
        this.sexText=item;
        if(index==3){
          this.chooseSexIndex = 9;
        }else{
          this.chooseSexIndex = index;
        }
      },
      // 选择职业
      chooseProfession(index,item){
        this.professionIndex = index;
        this.professionText = item;
        if(index==2){
          this.chooseProfessionIndex = 4;
        }else if(index==3){
          this.chooseProfessionIndex = 5;
        }else if(index==4){
          this.chooseProfessionIndex = 9;
        }else{
          this.chooseProfessionIndex = index;
        }
      },
      // 重置
      reset(){
        this.ageIndex = 0;
        this.sexIndex = 0;
        this.professionIndex = 0;
        this.unitIndex = 0;
        this.sexText='全部性别';
        this.ageText='全部年龄段';
        this.professionText='全部职业';
        this.unitText='全部单位类型';
        this.chooseAgeIndex = '';
        this.chooseSexIndex = '';
        this.chooseUnitIndex = '';
        this.chooseProfessionIndex = '';
        this.getData();
      },
      // 获取性别饼图
      getSexChart(data){
        let angle = 5;
        let that  = this;
        let data1 = [];
        let placeHolderStyle = {
          normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
          },
          emphasis : {
            color: 'rgba(0,0,0,0)'
          }
        }
        data.pieData.moneyDesc.map((item,index)=>{
          let obj = {};
          if(index<3){
            obj.name = item;
            obj.value = data.pieData.money[index];
            data1.push(obj)
          }else{
            if(data.pieData.money[index]!=0){
              obj.name = item;
              obj.value = data.pieData.money[index];
              data1.push(obj)
            }
            data.pieData.moneyDesc[index] = null;
          }
        })
        let data2 = [];
        data.pieData.numDesc.map((item,index)=>{
          let obj = {};
          if(index<3){
            obj.name = item;
            obj.value = data.pieData.num[index];
            data2.push(obj)
          }else{
            if(data.pieData.num[index]!=0){
              obj.name = item;
              obj.value = data.pieData.num[index];
              data2.push(obj)
            }
            data.pieData.numDesc[index] = null;
          }
        })
        this.mySexChart.hideLoading()
        this.mySexChart.setOption({
          tooltip:{
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
             let txt = '';
             if(params.dataIndex!=3){
               let mes = data.dataList[params.dataIndex];
               txt = `
                      <p>${mes.title}</p>
                      <p>享受养老待遇人数：${mes.num}</p>
                      <p>享受养老待遇人数占比：${mes.numRatio}</p>
                      <p>养老支出金额：${mes.money}</p>
                      <p>养老支出金额占比：${mes.moneyRatio}</p>
                      <p>个人月度养老待遇平均值：${mes.moneyAve}</p>
                      `;
             }
              return txt;
            },
          },
          legend: [{
            orient: 'vertical',
            // x: 'left',
            top:'40%',
            left:'4%',
            selectedMode:false,
            textStyle:{
              color:'#fff'
            },
            icon: 'rect',
            itemWidth:10,
            itemHeight:10,
            data:data.pieData.moneyDesc,
          },{
            orient: 'vertical',
            top:'40%',
            left:'75%',
            textStyle:{
              color:'#fff'
            },
            icon: 'rect',
            itemWidth:10,
            itemHeight:10,
            selectedMode:false,
            data:data.pieData.numDesc
          }],
          series: [
            {
              name:'基于性别的养老支出统计',
              type:'pie',
              radius: [0, '50%'],
              clockwise:false,
              hoverAnimation:false,
              minAngle:angle,
              label:{
                show:false,
              },
              itemStyle:{
                color:function(params){
                  let colorList = ['#3281fd', '#ff6a93', '#888','#ccc'];
                  return colorList[params.dataIndex]
                }
              },
              data:data2
              // data:arr[0]
            },
            {
              name:'基于性别的养老支出统计',
              type:'pie',
              minAngle:5,
              hoverAnimation:false,
              radius: ['60%', '80%'],
              clockwise:false,//是否按顺时针来排布 false为按逆时针排布。
              label:{
                show:false
              },
              itemStyle:{
                color:function(params){

                  let colorList = ['#7eaffc', '#ffa1bb', '#a8a8a8','#ccc'];
                  return colorList[params.dataIndex]
                }
              },
              data:data1
            }
          ]
        })
      },
      //基于年龄段的养老支出统计 柱状图
      getAgeChart(data){
        let allAve = data.allAve;
        let arr = data.graphData.moneyAve;
        let max = seqencingArr(arr,allAve,1);
        let that = this;
        this.myAgeChart.hideLoading();
        this.myAgeChart.setOption({
          title:{},
          grid:{
            top:60,
            left:50,
            right:50,
            bottom:50,
          },
          legend:{
            bottom:5,
            left:'center',
            selectedMode:false,
            textStyle:{
              color:'#fff'
            },
            icon:'rect',
            itemWidth:10,
            itemHeight:10,
            data:['享受养老待遇人数占比','养老支出占比','养老待遇均值']
          },
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let title = params[0].axisValue+'养老支出统计';
              let mes = data.dataList[params[0].dataIndex];
              let txt = `
                      <p>${title}</p>
                      <p>享受养老待遇人数：${mes.num}</p>
                      <p>享受养老待遇人数占比：${mes.numRatio}</p>
                      <p>养老支出金额：${mes.money}</p>
                      <p>养老支出金额占比：${mes.moneyRatio}</p>
                      <p>个人月度养老待遇平均值：${mes.moneyAve}</p>
                      <p>${that.queryYear}年人均养老待遇均值：${data.allAve}元</p>`;
              return txt;
            }
          },
          xAxis: {
            data: data.xlist,
            show: true,
            axisLine: {
              show: true, // 显示x轴坐标线并设置为虚线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis:[{
            splitLine: {
              show: false,
            },
            name:'占比（%）',
            nameTextStyle:{
              color:'#fff',
            },
            position: 'left',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
                // color:'#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },{
            name:'养老待遇均值(元)',
            nameTextStyle:{
              color:'#fff',
            },
            splitLine: {
              show: false,
            },
            max:max,
            position: 'right',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          series:[
            {
              name:'享受养老待遇人数占比',
              type:'bar',
              data:data.graphData.numRatio,
              itemStyle:{
                color:'#eb678b'
              },
              barMaxWidth:30,
              barWidth:'20%',
              yAxisIndex: 0,
            },{
              name:'养老支出占比',
              type:'bar',
              data:data.graphData.moneyRatio,
              itemStyle:{
                color:'#ffd66a'
              },
              barMaxWidth:30,
              barWidth:'20%',
              yAxisIndex: 0,
            },{
              name:'养老待遇均值',
              type:'bar',
              data:data.graphData.moneyAve,
              barMaxWidth:30,
              barWidth:'20%',
              yAxisIndex: 1,
              itemStyle:{
                color:'#55cdb7'
              },
              markLine:{
                symbol:'none',
                label:{
                  show:false,
                  emphasis:{
                    show:false,
                  },
                },
                data : [
                  {
                    yAxis:data.allAve,
                    name: '人均养老待遇',
                    tooltip: {
                      show:true,
                      formatter: function(par){
                        let txt = `
                          <p>人均养老待遇</p>
                          <p>年份：${that.queryYear}</p>
                          <p>金额：50元</p>
                        `
                        return txt
                      }
                    }
                  }
                ],
                lineStyle: {
                  color:'#0298df',
                  type:'solid'
                }
              }
            }
          ],
        })
      },
      //基于职业的养老支出统计
      getProfessionChart(data){
        let allAve = data.allAve;
        let arr = data.graphData.moneyAve;
        let max = seqencingArr(arr,allAve,1);
        let that = this;
        this.myProfessionChart.hideLoading();
        this.myProfessionChart.setOption({
          title:{},
          grid:{
            top:60,
            left:50,
            right:50,
            bottom:50,
          },
          legend:{
            bottom:5,
            left:'center',
            selectedMode:false,
            textStyle:{
              color:'#fff'
            },
            icon:'rect',
            itemWidth:10,
            itemHeight:10,
            data:['享受养老待遇人数占比','养老支出占比','养老支出均值']
          },
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let title = params[0].axisValue+'养老支出统计';
              let mes = data.dataList[params[0].dataIndex];
              let txt = `
                      <p>${title}</p>
                      <p>享受养老待遇人数：${mes.num}</p>
                      <p>享受养老待遇人数占比：${mes.numRatio}</p>
                      <p>养老支出金额：${mes.money}</p>
                      <p>养老支出金额占比：${mes.moneyRatio}</p>
                      <p>个人月度养老待遇平均值：${mes.moneyAve}</p>
                      <p>${that.queryYear}年人均养老待遇均值：${data.allAve}元</p>`;
              return txt;
            }
          },
          xAxis: {
            data: data.xlist,
            show: true,
            axisLine: {
              show: true, // 显示x轴坐标线并设置为虚线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis:[{
            splitLine: {
              show: false,
            },
            name:'占比（%）',
            nameTextStyle:{
              color:'#fff',
            },
            position: 'left',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
                // color:'#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },{
            name:'养老待遇均值(元)',
            nameTextStyle:{
              color:'#fff',
            },
            splitLine: {
              show: false,
            },
            max:max,
            position: 'right',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          series:[
            {
              name:'享受养老待遇人数占比',
              type:'bar',
              data:data.graphData.numRatio,
              itemStyle:{
                color:'#eb678b'
              },
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 0,
            },{
              name:'养老支出占比',
              type:'bar',
              data:data.graphData.moneyRatio,
              itemStyle:{
                color:'#ffd66a'
              },
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 0,
            },{
              name:'养老支出均值',
              type:'bar',
              data:data.graphData.moneyAve,
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 1,
              itemStyle:{
                color:'#55cdb7'
              },
              markLine:{
                symbol:'none',
                label:{
                  show:false,
                  emphasis:{
                    show:false,
                  },
                },
                data : [
                  {
                    yAxis:data.allAve,
                    name: '人均养老待遇',
                    tooltip: {
                      show:true,
                      formatter: function(par){
                        let txt = `
                          <p>人均养老待遇</p>
                          <p>年份：${that.queryYear}</p>
                          <p>金额：50元</p>
                        `
                        return txt
                      }
                    }
                  }
                ],
                lineStyle: {
                  color:'#0298df',
                  type:'solid'
                }
              }
            }
          ],
        })
      },
      //基于单位类型的养老支出统计
      getUnitChart(data){
        let allAve = data.allAve;
        let arr = data.graphData.moneyAve;
        let max = seqencingArr(arr,allAve,1);
        let that = this;
        this.myUnitChart.hideLoading();
        this.myUnitChart.setOption({
          title:{},
          grid:{
            top:60,
            left:50,
            right:50,
            bottom:50,
          },
          legend:{
            bottom:5,
            left:'center',
            selectedMode:false,
            textStyle:{
              color:'#fff'
            },
            icon:'rect',
            itemWidth:10,
            itemHeight:10,
            data:['享受养老待遇人数占比','养老支出占比','养老支出均值']
          },
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let title = params[0].axisValue+'养老支出统计';
              let mes = data.dataList[params[0].dataIndex];
              let txt = `
                      <p>${title}</p>
                      <p>享受养老待遇人数：${mes.num}</p>
                      <p>享受养老待遇人数占比：${mes.numRatio}</p>
                      <p>养老支出金额：${mes.money}</p>
                      <p>养老支出金额占比：${mes.moneyRatio}</p>
                      <p>个人月度养老待遇平均值：${mes.moneyAve}</p>
                      <p>${that.queryYear}年人均养老待遇均值：${data.allAve}元</p>`;
              return txt;
            }
          },
          xAxis: {
            data: data.xlist,
            show: true,
            axisLine: {
              show: true, // 显示x轴坐标线并设置为虚线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis:[{
            splitLine: {
              show: false,
            },
            name:'占比（%）',
            nameTextStyle:{
              color:'#fff',
            },
            position: 'left',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
                // color:'#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },{
            name:'养老待遇均值(元)',
            nameTextStyle:{
              color:'#fff',
            },
            splitLine: {
              show: false,
            },
            max:max,
            position: 'right',
            splitNumber: 2,
            axisLine: {
              show: true, // 显示y轴坐标线
              lineStyle: {
                color: '#294363'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:true,
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          series:[
            {
              name:'享受养老待遇人数占比',
              type:'bar',
              data:data.graphData.numRatio,
              itemStyle:{
                color:'#eb678b'
              },
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 0,
            },{
              name:'养老支出占比',
              type:'bar',
              data:data.graphData.moneyRatio,
              itemStyle:{
                color:'#ffd66a'
              },
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 0,
            },{
              name:'养老支出均值',
              type:'bar',
              data:data.graphData.moneyAve,
              barMaxWidth:30,
              barWidth:'18%',
              yAxisIndex: 1,
              itemStyle:{
                color:'#55cdb7'
              },
              markLine:{
                symbol:'none',
                label:{
                  show:false,
                  emphasis:{
                    show:false,
                  },
                },
                data : [
                  {
                    yAxis:data.allAve,
                    name: '人均养老待遇',
                    tooltip: {
                      show:true,
                      formatter: function(par){
                        let txt = `
                          <p>人均养老待遇</p>
                          <p>年份：${that.queryYear}</p>
                          <p>金额：50元</p>
                        `
                        return txt
                      }
                    }
                  }
                ],
                lineStyle: {
                  color:'#0298df',
                  type:'solid'
                }
              }
            }
          ],
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import '../../../assets/css/decision.css';

















  .left-circle-wrapper {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin-left: 12px;
    margin-right: 3px;
  }
</style>
